<template>
  <div>
    <el-table
      :data="tableData"
      border
      style="width: 100%;">
      <el-table-column
        type="index"
        align="center"
        label="序号"
        width="106">
      </el-table-column>
      <el-table-column
        prop="good_name"
        align="center"
        label="商品名称"
        min-width="180">
      </el-table-column>
      <el-table-column
        label="商品主图"
        align="center"
        min-width="150">
        <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="imgPath+scope.row.good_image"
              :preview-src-list="[imgPath+scope.row.good_image]">
            </el-image>
        </template>
      </el-table-column>
      <el-table-column
        prop="good_code"
        label="商品编码"
        align="center"
        min-width="180">
      </el-table-column>
      <el-table-column
        align="center"
        min-width="210"
        label="操作">
        <template slot-scope="scope">
               <el-button
                 size="mini"
                 @click="handleDetails(scope.$index, scope.row)">详情</el-button>
               <el-button
                 size="mini"
                 @click="handleConfig(scope.$index, scope.row)">编辑</el-button>
               <el-button
                 size="mini"
                 type="danger"
                 @click="handleDelete(scope.$index, scope.row)">删除</el-button>
             </template>
      </el-table-column>
    </el-table>
    <div class="pagetbnBox">
      <div class="lipagination">
        <el-pagination
            background
            @current-change="handleCurrentChange"
            layout="total, prev, pager, next"
            :page-size="10"
            :pager-count="5"
            :current-page.sync="currentPage"
            :total="total" hide-on-single-page>
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import request from 'request'
export default {
  data () {
    return {
      currentPage: ''
    }
  },
  props: {
    tableData: {
      type: Array
    },
    imgPath: '',
    total: Number
  },
  methods: {
    handleCurrentChange (val) {
      this.currentPage = val
      this.$parent.init(val)
    },
    handleDetails (index, row) {
      this.$router.push({
        name: 'goodDetail',
        params: {
          imgPath: this.imgPath,
          index: index,
          row: row
        }
      })
    },
    handEditSure () {

    },
    handleConfig (index, row) {
      this.$router.push({
        name: 'goodEdit',
        params: {
          imgPath: this.imgPath,
          index: index,
          row: row
        }
      })
    },
    handleDelete (index, row) {
      console.log(index, row)
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.deleGood(row.good_id).then(res => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          if (index === 0) {
            this.currentPage--
          }
          setTimeout(() => {
            this.$parent.init(this.currentPage)
          }, 500)
        }).catch(e => {
          this.$message.error('删除失败')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })

      // this.$parent.init(this.currentPage)
    }
  },
  created () {
    this.currentPage = Number(localStorage.getItem('cuttent')) || 1
    this.$parent.init(this.currentPage)
  },
  beforeUpdate () {
    localStorage.setItem('cuttent', this.currentPage)
  }
}
</script>

<style lang="stylus" scoped>
.block{
  float right
  padding 20px 0 0 0
}
</style>
